<template>

  <div class="bg-login">
    <div class="login-container">

      <div class="login-top" style="text-align: center;">
        <h5 class="login-zh-title">铅山县生态产品价值转化支撑平台</h5>
      </div>

      <div class="login-bottom">
        <form @submit.prevent="register" class="login-form">
          <!-- 使用Element UI的el-input组件 -->
          <el-input
              id="username"
              v-model="username"
              placeholder="请输入用户名"
              prefix-icon="user"
              autocomplete="off"
              class="transparent-input"
          ></el-input>
          <br>
          <el-input
              id="password"
              type="password"
              v-model="password"
              placeholder="请输入密码"
              prefix-icon="lock"
              autocomplete="off"
              show-password
              class="transparent-input"
          ></el-input>
          <br>
          <el-input
              id="email"
              v-model="email"
              placeholder="请输入邮箱"
              prefix-icon="email"
              autocomplete="off"
              class="transparent-input"
          ></el-input>

          <br>
          <button type="submit" class="login-button" :disabled="!username ||!password">注册</button>
          <!--        <el-button type="success">成功按钮</el-button>-->
        </form>
        <p v-if="message" class="login-message">{{ message }}</p>


      </div>

    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router';
// import {useRegisterStore} from "@/stores/login";
// import {storeToRefs} from 'pinia'
import axios from "axios";

// const registerStore = useRegisterStore();
// const {password, username} = storeToRefs(registerStore);

const username = ref('');
const password = ref('');

const email = ref('');
// const rules = ref({
//   username: [{required: true, message: "必填项不能为空", trigger: "blur"}],
//   password: [{required: true, message: "必填项不能为空", trigger: "blur"}],
//   captcha: [{required: true, message: "必填项不能为空", trigger: "blur"}]
// });

const message = ref('');

const router = useRouter();

// 登录处理函数
const register = async () => {
  // error.value = ''; // 清空错误信息
  try {
    // const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/api/register`, {
      const response = await axios.post(`/api/auth/register`, {
          username: username.value,
          password: password.value,
          email: email.value,
        },
        {
          // 配置 validateStatus，允许 4xx 和 5xx 状态码也不视为错误
          validateStatus: (status) => {
            return status >= 200 && status < 300; // 只把 2xx 状态码当作成功
            // 你也可以修改为：return status >= 200 && status < 500;
          }
        }
    );
    console.log("status", response)

    if (response.status === 201) {
      // const token = response.data.token;
      // console.log("token", response.data.token)
      // localStorage.setItem('token', token);
      ElMessage.success(response.data.message);
      // 可以在登录成功后进行跳转或者其他操作
      console.log("跳转到homepage", response.data.message)
      setTimeout(async () => {
        ElMessage.success("注册成功，跳转到登录页面");

        await router.push('/userLogin');
      },200)
      username.value = '';
      password.value = '';

    }
  } catch (err) {
    if(err.response && err.response.status === 409) {
      ElMessage.error(err.response.data.message);
    }else if(err.response && err.response.status === 400) {
      ElMessage.error(err.response.data.message);
    } else {
      console.error("err@@", err.message)
      ElMessage.error(err.message);
    }
  }
};

</script>


<style>


</style>